---
title: "Flex Shrink"
# description: "Utilities for controlling how flex items shrink."
description: "控制 flex 项目缩小的功能类"
features:
  responsive: true
  customizable: true
  hover: false
  focus: false
---

import plugin from 'tailwindcss/lib/plugins/flexShrink'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = { plugin }

## Shrink

Use `flex-shrink` to allow a flex item to shrink if needed:
使用  `flex-shrink` 允许一个 flex 项目在必要的时候缩小：

```html amber resizable
<template preview class="p-6">
  <div class="flex space-x-4">
    <div class="flex-grow flex-shrink-0 h-16 w-16 rounded-md bg-amber-300 text-white text-2xl font-extrabold flex items-center justify-center">
      <svg class="w-5 h-5" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.286 8.875v-2.25a5.58 5.58 0 011.673-3.977A5.76 5.76 0 0110 1a5.76 5.76 0 014.04 1.648 5.581 5.581 0 011.674 3.977v2.25c.606 0 1.188.237 1.617.659.428.422.669.994.669 1.591v5.625c0 .597-.24 1.169-.67 1.591a2.304 2.304 0 01-1.616.659H4.286a2.304 2.304 0 01-1.617-.659A2.233 2.233 0 012 16.75v-5.625c0-.597.24-1.169.67-1.591a2.304 2.304 0 011.616-.659zm9.143-2.25v2.25H6.57v-2.25c0-.895.362-1.754 1.005-2.386A3.456 3.456 0 0110 3.25c.91 0 1.781.356 2.424.989a3.349 3.349 0 011.005 2.386z" fill="currentColor"/></svg>
    </div>
    <div class="flex-shrink w-64 h-16 rounded-md bg-amber-500 text-white text-2xl font-extrabold flex items-center justify-center px-6">
      <svg class="h-5 w-14" fill="none"><path d="M8 5l5 5m0 0l-5 5m5-5H1M24 10.005l2 1.999 4-3.998m6 1.999C36 14.972 31.97 19 27 19c-4.98 0-9-4.028-9-8.995C17.99 5.028 22.02 1 26.99 1c4.97-.01 9 4.018 9 8.985l.01.02zM46 5l-5 5m0 0l5 5m-5-5h12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
    </div>
    <div class="flex-grow flex-shrink-0 h-16 w-16 rounded-md bg-amber-300 text-white text-2xl font-extrabold flex items-center justify-center">
      <svg class="w-5 h-5" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.286 8.875v-2.25a5.58 5.58 0 011.673-3.977A5.76 5.76 0 0110 1a5.76 5.76 0 014.04 1.648 5.581 5.581 0 011.674 3.977v2.25c.606 0 1.188.237 1.617.659.428.422.669.994.669 1.591v5.625c0 .597-.24 1.169-.67 1.591a2.304 2.304 0 01-1.616.659H4.286a2.304 2.304 0 01-1.617-.659A2.233 2.233 0 012 16.75v-5.625c0-.597.24-1.169.67-1.591a2.304 2.304 0 011.616-.659zm9.143-2.25v2.25H6.57v-2.25c0-.895.362-1.754 1.005-2.386A3.456 3.456 0 0110 3.25c.91 0 1.781.356 2.424.989a3.349 3.349 0 011.005 2.386z" fill="currentColor"/></svg>
    </div>
  </div>
</template>

<div class="flex ...">
  <div class="flex-grow w-16 h-16 ...">
    <!-- This item will grow or shrink as needed -->
  </div>
  <div class="**flex-shrink** w-64 h-16 ...">
    <!-- This item will shrink -->
  </div>
  <div class="flex-grow w-16 h-16 ...">
    <!-- This item will grow or shrink as needed -->
  </div>
</div>
```

## Don't shrink

<!-- Use `flex-shrink-0` to prevent a flex item from shrinking: -->
使用 `flex-shrink-0` 阻止一个 flex 项目缩小:

```html lightBlue resizable
<template preview class="p-6">
  <div class="flex space-x-4">
    <div class="flex-1 h-16 rounded-md bg-light-blue-300 text-white text-2xl font-extrabold flex items-center justify-center">
      <svg class="h-5 w-14" fill="none"><path d="M8 5l5 5m0 0l-5 5m5-5H1M24 10.005l2 1.999 4-3.998m6 1.999C36 14.972 31.97 19 27 19c-4.98 0-9-4.028-9-8.995C17.99 5.028 22.02 1 26.99 1c4.97-.01 9 4.018 9 8.985l.01.02zM46 5l-5 5m0 0l5 5m-5-5h12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
    </div>
    <div class="flex-shrink-0 h-16 w-32 rounded-md bg-light-blue-500 text-white text-2xl font-extrabold flex items-center justify-center">
      <svg class="w-5 h-5" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.286 8.875v-2.25a5.58 5.58 0 011.673-3.977A5.76 5.76 0 0110 1a5.76 5.76 0 014.04 1.648 5.581 5.581 0 011.674 3.977v2.25c.606 0 1.188.237 1.617.659.428.422.669.994.669 1.591v5.625c0 .597-.24 1.169-.67 1.591a2.304 2.304 0 01-1.616.659H4.286a2.304 2.304 0 01-1.617-.659A2.233 2.233 0 012 16.75v-5.625c0-.597.24-1.169.67-1.591a2.304 2.304 0 011.616-.659zm9.143-2.25v2.25H6.57v-2.25c0-.895.362-1.754 1.005-2.386A3.456 3.456 0 0110 3.25c.91 0 1.781.356 2.424.989a3.349 3.349 0 011.005 2.386z" fill="currentColor"/></svg>
    </div>
    <div class="flex-1 h-16 rounded-md bg-light-blue-300 text-white text-2xl font-extrabold flex items-center justify-center">
      <svg class="h-5 w-14" fill="none"><path d="M8 5l5 5m0 0l-5 5m5-5H1M24 10.005l2 1.999 4-3.998m6 1.999C36 14.972 31.97 19 27 19c-4.98 0-9-4.028-9-8.995C17.99 5.028 22.02 1 26.99 1c4.97-.01 9 4.018 9 8.985l.01.02zM46 5l-5 5m0 0l5 5m-5-5h12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
    </div>
  </div>
</template>

<div class="flex ...">
  <div class="flex-1 h-16 ...">
    <!-- This item will grow or shrink as needed -->
  </div>
  <div class="**flex-shrink-0** h-16 w-32 ...">
    <!-- This item will not shrink below its initial size-->
  </div>
  <div class="flex-1 h-16 ...">
    <!-- This item will grow or shrink as needed -->
  </div>
</div>
```

<!-- ## Responsive -->
## 响应式

<!-- To control how a flex item shrinks at a specific breakpoint, add a `{screen}:` prefix to any existing utility class. For example, use `md:flex-shrink-0` to apply the `flex-shrink-0` utility at only medium screen sizes and above. -->
要控制 flex 项目在特定断点处的缩小方式，请在任何现有的功能类前添加 `{screen}:` 前缀。例如，使用 `md:flex-shrink-0` 仅在中等及以上尺寸屏幕上应用 `flex-shrink-0` 功能。

```html
<div class="flex ...">
  <!-- ... -->
  <div class="flex-shrink **md:flex-shrink-0** ...">
    Responsive flex item
  </div>
  <!-- ... -->
</div>
```

<!-- For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. -->
关于 Tailwind 的响应式设计功能的更多信息，请查看 [响应式设计](/docs/responsive-design) 文档。

## 定制

### Shrink Values

<!-- By default Tailwind provides two `flex-shrink` utilities. You change, add, or remove these by editing the `theme.flexShrink` section of your Tailwind config. -->
默认情况下，Tailwind 提供了两个 `flex-shrink` 实用程序。您可以通过编辑您的 Tailwind 配置中的 `theme.flexShrink` 部分来改变、添加或删除这些功能类。

```diff-js
  // tailwind.config.js
  module.exports = {
    theme: {
      flexShrink: {
        '0': 0,
-       DEFAULT: 1,
+       DEFAULT: 2,
+       '1': 1,
      }
    }
  }
```

### 变体

<Variants plugin="flexShrink" />

### 禁用

<Disabling plugin="flexShrink" />
